<template>
  <view>
    <view class="order_detail">
      <view class="order_info">
        <view class="bottom">
          <view class="flex1">上线状态</view>
          <view class="order_no">
            <view class="status">{{ checked ? "上线中" : "下线中" }}</view>
            <u-switch v-model="checked" @change="onChange"></u-switch>
            <!-- <van-switch :checked="checked" @change="onChange" size="24px" /> -->
          </view>
        </view>
      </view>
      <uinput
        v-model="mch_info.per_consume"
        placeholder="请输入人均消费"
        label="人均消费/元"
        type="number"
      />
      <uinput
        v-model="mch_info.phone"
        placeholder="请输入联系电话"
        label="商家联系电话"
        type="tel"
      />
      <uinput
        v-model="mch_info.email"
        placeholder="请输入联系邮箱"
        label="商家联系邮箱"
        type="email"
      />
      <view class="start_pick_container" @tap="choose_address">
        <uinput :border="false" label="店铺地址" disabled />
        <view v-if="!mch_info.address" class="placeholder">请选择店铺地址</view>
        <view v-if="mch_info.address" class="placeholder">{{
          mch_info.address
        }}</view>
      </view>
      <view class="choose_open_time">
        <view class="lable">营业时间</view>
        <view class="timer_container">
          <view
            class="open_time"
            v-if="!open_time"
            @tap="
              open_timer_visible = true;
              end_timer_visible = false;
            "
            >选择开始时间</view
          >
          <view
            class="open_time"
            v-if="open_time"
            @tap="
              open_timer_visible = true;
              end_timer_visible = false;
            "
            >{{ open_time }}</view
          >
          <view class="fenge">———</view>
          <view
            class="end_time"
            v-if="!end_time"
            @tap="
              open_timer_visible = false;
              end_timer_visible = true;
            "
            >选择结束时间</view
          >
          <view
            class="end_time"
            v-if="end_time"
            @tap="
              open_timer_visible = false;
              end_timer_visible = true;
            "
            >{{ end_time }}</view
          >
        </view>
      </view>
      <view class="uploader_container" style="margin-bottom: 10upx">
        <view style="padding-left: 5upx">上传门店logo</view>
        <view class="upload" style="padding-left: 0upx">
          <uImg
            ref="upimg"
            :canUploadFile="true"
            :limit="limit1"
            :uploadFileUrl="uploadFileUrl"
            :uImgList.sync="uImgList1"
            @uploadSuccess="uploadSuccess1"
            :fileKeyName="name"
            @delete="delete_img1"
          />
        </view>
      </view>

      <view class="uploader_container" style="margin-bottom: 10upx">
        <view style="padding-left: 5upx">上传门店主图</view>
        <view class="upload" style="padding-left: 0upx">
          <uImg
            ref="upimg"
            :canUploadFile="true"
            :limit="limit2"
            :uploadFileUrl="uploadFileUrl"
            :uImgList.sync="uImgList2"
            @uploadSuccess="uploadSuccess2"
            :fileKeyName="name"
            @delete="delete_img2"
          />
        </view>
      </view>
    </view>
    <view class="toAssistant1" @tap="save_mch"> 保存信息 </view>
    <van-toast id="van-toast" />
    <w-picker
      :visible="open_timer_visible"
      mode="time"
      :value="mch_info.running_start"
      :second="false"
      @confirm="confirm_open_time"
      @cancel="open_timer_visible = false"
      ref="date1"
    ></w-picker>
    <w-picker
      :visible="end_timer_visible"
      mode="time"
      :value="mch_info.running_end"
      :second="false"
      @confirm="confirm_end_time"
      @cancel="end_timer_visible = false"
      ref="date1"
    ></w-picker>
  </view>
</template>

<script>
const statusList = {
  0: "待付款",
  1: "待发货",
  2: "已发货",
  3: "交易完成",
  4: "售后",
  4: "交易取消",
};
const app = getApp();
import uImg from "../../components/zhtx-uploadImg/zhtx-uploadImg";
import { uc_info, online_stat, update_mch } from "../../utils/imapi";
import {gcj02ToWgs84} from '../../utils/translate'
export default {
  props: {},
  components: {
    uImg,
  },
  data() {
    return {
      good_info: {},
      statusList,
      checked: false,
      mch_info: {
        mch_name: "",
        mch_logo: "",
        main_cate: "",
        org_type: "",
        email: "",
        address: "",
        phone: "",
        pict_main_url: "",
        location: "",
        per_consume: "",
        running_start: "",
        running_end: "",
      },
      fileList: [],
      rangeVal: "",
      open_time: "",
      end_time: "",
      open_timer_visible: false,
      end_timer_visible: false,
      limit1: 1,
      limit2: 1,
      uploadFileUrl:
        "https://api.comm.t.xingkonglian.net:8098/api/v1/oss/upload_starx",
      uImgList1: [],
      uImgList2: [],
      imgList1: [],
      imgList2: [],
      name: "file",
    };
  },
  computed: {},
  watch: {},
  onLoad(options) {
    this.uc_info();
  },
  onReady() {},
  onShow() {},
  methods: {
    async uc_info() {
      try {
        const data = await uc_info();
        console.log(data);
        if (data.code == 0) {
          this.mch_info.mch_name = data.data.mch_name;
          this.mch_info.mch_logo = data.data.mch_logo;
          this.mch_info.main_cate = data.data.main_cate;
          this.mch_info.org_type = data.data.org_type;
          this.mch_info.email = data.data.email;
          this.mch_info.address = data.data.address;
          this.mch_info.phone = data.data.phone;
          this.mch_info.pict_main_url = data.data.pict_main_url;
          this.mch_info.location = data.data.location;
          this.mch_info.per_consume = data.data.per_consume;
          this.mch_info.running_start = data.data.running_start;
          this.mch_info.running_end = data.data.running_end;
          this.open_time = data.data.running_start;
          this.end_time = data.data.running_end;
          if(data.data.mch_logo) {
            this.uImgList1.push(data.data.mch_logo);
          }
          if(data.data.pict_main_url) {
            this.uImgList2.push(data.data.pict_main_url);
          }
          this.checked = data.data.trade_status==0?false:true
          console.log(this.checked);
        }
      } catch (error) {}
    },
    onChange(e) {
      console.log(e);
      this.checked = e
      if (e) {
        this.online_stat(1);
      } else {
        this.online_stat(0);
      }
    },
    async online_stat(trade_status) {
      try {
        console.log(this.mch_info);
        const data = await online_stat({
          mch_code: this.mch_info.mch_code,
          trade_status,
        });
        console.log(data);
        console.log(data.data);
        if (data.code == 0) {
          this.$toast(data.msg);
        } else {
          data.msg;
          uni.showToast({
            icon: "none",
            title: data.msg,
            duration: 2000,
          });
          this.checked = !this.checked;
        }
      } catch (error) {
        console.log(error);
        //   this.$toast('操作失败,请稍后重试')
      }
    },

    choose_address() {
      const that = this;
      console.log(this.mch_info);
      uni.chooseLocation({
        success: function (res) {
          console.log(res);
          const lng = res.longitude;
          const lat = res.latitude;
          const result = gcj02ToWgs84(lng,lat)
          console.log(result);
          // console.log(result);
          that.mch_info.address = res.address;
          that.mch_info.location = result[0] + "," + result[1];
        },
      });
    },
    confirm_open_time(e) {
      console.log(e);
      this.open_time = e.result;
      this.mch_info.running_start = e.result;
      this.open_timer_visible = false;
    },
    confirm_end_time(e) {
      console.log(e);
      this.end_time = e.result;
      this.mch_info.running_end = e.result;
      this.end_timer_visible = false;
    },

    geo: function (callback) {
      var _this = this;

      uni.chooseLocation({
        success: function (res) {
          console.log(res);
          const lng = res.longitude;
          const lat = res.latitude;
          // const result = gcj02ToWgs84(lng,lat)
          // console.log(result);
        },
      });
    },
    uploadSuccess1(result) {
      if (result.statusCode == 200) {
        //上传成功的回调处理
        console.log(result.data);
        const img = JSON.parse(result.data).data;
        console.log(img);
        console.log(this.imgList1);
        this.imgList1.push(img);
        this.mch_info.mch_logo = this.imgList1[0];
      } else {
      }
    },
    delete_img1(index) {
      console.log(index);
      this.imgList1.splice(index, 1);
      console.log(this.imgList1);
    },
    uploadSuccess2(result) {
      if (result.statusCode == 200) {
        //上传成功的回调处理
        console.log(result.data);
        const img = JSON.parse(result.data).data;
        console.log(img);
        this.imgList2.push(img);
        this.mch_info.pict_main_url = this.imgList2[0];
      } else {
      }
    },
    delete_img2(index) {
      console.log(index);
      this.imgList2.splice(index, 1);
      console.log(this.imgList2);
    },
    async save_mch() {
      this.mch_info.per_consume=Number(this.mch_info.per_consume)
      try {
        const data = await update_mch(this.mch_info);
        if (data.code == 0) {
          uni.showToast({
            title: "保存成功",
          });
        }
      } catch (error) {}
    },
  },
  onReachBottom() {},
  onHide() {},
};
</script>

<style scoped lang="scss" scoped>
.order_status {
  font-size: 36upx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #727278;
}
.order_detail {
  width: 100%;
  padding-left: 32upx;
  padding-right: 44upx;
  padding-bottom: 80rpx;
  font-size: 28upx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #0a0819;

  .order_info {
    border-bottom: 2upx solid #f0eefd;
    padding: 36upx 0 20upx;
    .top {
      display: flex;
      align-items: center;
    }
  }
}
.image {
  width: 160upx;
  height: 160upx;
  border-radius: 10upx;
  margin-right: 20upx;
}
.avatar1 {
  width: 160upx;
  height: 160upx;
  border-radius: 10upx;
}
.bottom {
  display: flex;
  align-items: center;
  margin-top: 20upx;
}
.flex1 {
  width: 160upx;
  margin-right: 20upx;
}
.flex {
  display: flex;
  align-items: center;
  height: 82upx;
  border-bottom: 2upx solid #f0eefd;
}
.order_no {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.start_pick_container {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  .placeholder {
    position: absolute;
    top: 50%;
    left: 216rpx;
    transform: translateY(-50%);
    color: #333333;
  }
}
/deep/ .uinput {
  margin-bottom: 10rpx !important;
}
.choose_open_time {
  display: flex;
  align-items: center;
  color: #0a0819;
  margin-top: 10rpx;
  margin-bottom: 10rpx;
  padding-left: 10rpx;
  padding-right: 20rpx;
  .lable {
    margin-right: 70rpx;
  }
  .timer_container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
  }
}
.toAssistant1 {
  position: fixed;
  bottom: 10upx;
  width: 690upx;
  left: 30upx;
  /* right: 0; */
  height: 80upx;
  background: #f03752;
  border-radius: 50upx;
  text-align: center;
  line-height: 80upx;
  font-size: 32upx;
  color: #fff;
  font-weight: 600;
  font-family: PingFangSC-Semibold, PingFang SC;
  z-index: 99;
  /* margin-top: 60upx; */
}
</style>
